<template>
  <div>
    <el-dialog
      title="产品信息"
      :visible.sync="visible"
      width="50%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              样例图
            </template>
            <el-avatar shape="square" :src="productInfo.imageUrl"></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              产品编号
            </template>
            {{ productInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              产品名称
            </template>
            {{ productInfo.productName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              物料编码
            </template>
            {{ productInfo.productCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets" />
              规格型号
            </template>
            {{ productInfo.productModel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              计量单位
            </template>
            {{ productInfo.productUnit }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              所属类型
            </template>
            {{ productInfo.productType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              类型描述
            </template>
            {{ productInfo.description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              创建用户
            </template>
            {{ productInfo.creator }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              创建时间
            </template>
            {{ productInfo.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              修改用户
            </template>
            {{ productInfo.modifier }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              修改时间
            </template>
            {{ productInfo.updateTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    data: {
      type: Object,
    },
  },

  data() {
    return {
      productInfo:{
        imageUrl:'',
        id:'',
        productName:'',
        productCode:'',
        productModel:'',
        productUnit:'',
        productType:'',
        description:'',
        creator:'',
        createTime:'',
        modifier:'',
        updateTime:''
      }
    };
  },

  computed: {
    // business(){
    //   const res = this.productInfo.productTypes.map(typeInfo => {
    //     return typeInfo.productType;
    //   });
    //   return res.join(",");
    // }
  },
  methods: {
    open() {
      this.productInfo = this.data;
      this.productInfo.productType = this.data.typeBriefInfo.productType;
      this.productInfo.description = this.data.typeBriefInfo.description;
    },
    cancel() {
      this.initproductInfo();
      this.$emit("cancel");
    },
    initproductInfo() {
      this.productInfo = {
        imageUrl:'',
        id:'',
        productName:'',
        productCode:'',
        productModel:'',
        productUnit:'',
        productType:'',
        description:'',
        creator:'',
        createTime:'',
        modifier:'',
        updateTime:''
      }
    },
  },
};
</script>

<style>
</style>
